<template>
  <div v-loading="mapLoading" class="content">
    <MapContent />
    <TopSearch />
    <topRegionPoint />
    <mapcontrol></mapcontrol>
    <!-- <TopBar /> -->
    <bottomBar :tabs-list="monitoringStore.bottomBarList" />
  </div>
</template>

<script setup lang="ts">
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'
import MapContent from '@/pages/integrated-monitoring/components/map-content.vue'
// import TopBar from '@/pages/integrated-monitoring/components/top-bar.vue'
import TopSearch from '@/pages/integrated-monitoring/components/top-search.vue'
import topRegionPoint from '@/pages/integrated-monitoring/components/top-regionPoint.vue'
import bottomBar from '@/pages/integrated-monitoring/components/bottom-bar.vue'
import mapcontrol from '@/layouts/mapcontrol/control.vue'

const monitoringStore = useMonitoringStore()
const mapLoading = computed(() => monitoringStore.mapLoading)
let rightPosition = reactive()
provide('rightPosition', rightPosition)
// 页面头部菜单项
const componentVisible = ref('zhjc')
provide('componentVisible', componentVisible)

onMounted(() => {
  // monitoringStore.permissionsInfo()
})

onUnmounted(() => {
  monitoringStore.handleGetStationInfo()
  monitoringStore.handleUnmountedInitData()
  monitoringStore.handleGetGridPointMonitoringLegendData()
})
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
